<template>
  <div class="details_box_app" v-init-screen-h="0">
    <div class="tab_search">
      <Tabs @handleClickUrl="handleClickUrl" :active.sync="active"></Tabs>
      <el-switch
        v-if="active == 5 || active == 4"
        v-model="search"
        inactive-text="显示筛选"
        @click="handShowSearch"
      >
      </el-switch>
    </div>
    <!-- <router-view /> -->
    <!-- 历史记录 -->
    <HistoryData :show="search" v-if="active == 5"></HistoryData>
    <!-- 设备运行管理 -->
    <EquipmentAdmin v-if="active == 1"></EquipmentAdmin>
    <!-- 生产任务管理 -->
    <ProductionTask v-if="active == 2"></ProductionTask>
    <!-- 定时任务 -->
    <TimedTask v-if="active == 3"></TimedTask>
    <!-- 车间运行 -->
    <Workshop @handleWork="handleWork" v-if="active == 0"></Workshop>
    <!-- 告警 -->
    <GiveAnAlarm :show.sync="search" v-if="active == 4"></GiveAnAlarm>
  </div>
</template>

<script>
import Tabs from "../components/tabs.vue";
import GiveAnAlarm from "./giveAnAlarm";
import HistoryData from "./historyData";
import EquipmentAdmin from "./equipmentAdmin";
import ProductionTask from "./ProductionTask";
import TimedTask from "./TimedTask";
import Workshop from "./Workshop";
export default {
  components: {
    Workshop,
    TimedTask,
    Tabs,
    GiveAnAlarm,
    HistoryData,
    EquipmentAdmin,
    ProductionTask,
  },
  data() {
    return {
      active: 5,
      search: false,
      show: false,
    };
  },
  computed: {
    cachedViews() {
      return this.$store.state.tagsView.cachedViews;
    },
    key() {
      return this.$route.path;
    },
  },
  mounted() {
    if (this.$route.query.active === 0 || this.$route.query.active) {
      this.active = this.$route.query.active;
    }
  },
  methods: {
    handleWork() {
      this.active = 1;
    },
    handShowSearch() {
      // this.show = true;
      this.search = true;
    },
    handleClickUrl(item) {
      this.search = false;
      // this.$router.push({
      //   path: item.url,
      // });
    },
  },
};
</script>
<style lang='scss' >
.details_box_app {
  padding-right: 0 !important;
  /* margin-top: -30px; */
  background: url(../../../assets/images/pageBg.png) no-repeat 100%;
  background-size: cover;
  .el-table__body-wrapper::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  .el-table__body-wrapper::-webkit-scrollbar-track-piece,
  .el-tree::-webkit-scrollbar-track-piece,
  .time-list::-webkit-scrollbar-track-piece {
    background-color: inherit !important;
    -webkit-border-radius: 0em;
    -moz-border-radius: 0em;
    border-radius: 0em;
  }

  .el-table__body-wrapper::-webkit-scrollbar-thumb {
    background-color: #5dcbff;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
  }
  /* ::-webkit-scrollbar {
    width: 12px !important;
    height: 12px;
  } */
  .el-table__body-wrapper::-webkit-scrollbar-corner {
    /* background-color: #5dcbff; */
    display: none;
  }
  .tab_search {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    .el-switch__label {
      color: #fff;
    }
  }
}
.details_box_app {
  /* background-color: #010b48; */
  background: url(../../../assets/images/applicationCenter/app_bg.jpg) no-repeat;
  background-size: cover;
}
</style>